<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:ui="http://java.sun.com/jsf/facelets">
    <h:head>
        <title>
            <ui:insert name="title">
            </ui:insert> 
        </title>      
        <script type="text/javascript" src="../../resources/js/jquery-1.10.2.min.js" />
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>Internet Dreams</title>
        <link rel="stylesheet" href="../skin/css/screen.css" type="text/css" media="screen" title="default" />
        <!--[if IE]>
        <link rel="stylesheet" media="all" type="text/css" href="css/pro_dropline_ie.css" />
        <![endif]-->

        <!--  jquery core -->
        <!--<script src="../../resources/js/jquery-1.10.2.min.js" type="text/javascript"></script>-->
        <h:outputScript library="primefaces" name="jquery/jquery.js" target="head" />
        <script src="../../resources/js/jquery-ui-1.10.0.custom.js" type="text/javascript"></script>

        <!--<script src="../skin/js/jquery/jquery-1.4.1.min.js" type="text/javascript"></script>-->
        <!--        <script src="js/jquery-1.10.2.min.js"></script>-->
        <!--  checkbox styling script -->
        <script src="../skin/js/jquery/ui.core.js" type="text/javascript"></script>
        <script src="../skin/js/jquery/ui.checkbox.js" type="text/javascript"></script>
        <script src="../skin/js/jquery/jquery.bind.js" type="text/javascript"></script>
        <script type="../text/javascript">
            $(function() {
            $('input').checkBox();
            $('.toggle-all').click(function() {
            $('.toggle-all').toggleClass('toggle-checked');
            $('#mainform input[type=checkbox]').checkBox('toggle');
            return false;
            });
            });
        </script>  

        <!--<![if !IE 7]>-->

        <!--  styled select box script version 1 -->
        <script src="../skin/js/jquery/jquery.selectbox-0.5.js" type="text/javascript"></script>
        <script type="text/javascript">
            $(document).ready(function() {
            $('.styledselect').selectbox({inputClass: "selectbox_styled"});
            });
        </script>


        <!--<![endif]>-->

        <!--  styled select box script version 2 --> 
        <script src="../skin/js/jquery/jquery.selectbox-0.5_style_2.js" type="text/javascript"></script>
        <script type="text/javascript">
            $(document).ready(function() {
            $('.styledselect_form_1').selectbox({inputClass: "styledselect_form_1"});
            $('.styledselect_form_2').selectbox({inputClass: "styledselect_form_2"});
            });
        </script>

        <!--  styled select box script version 3 --> 
        <script src="../skin/js/jquery/jquery.selectbox-0.5_style_2.js" type="text/javascript"></script>
        <script type="text/javascript">
            $(document).ready(function() {
            $('.styledselect_pages').selectbox({inputClass: "styledselect_pages"});
            });
        </script>

        <!--  styled file upload script --> 
        <script src="../skin/js/jquery/jquery.filestyle.js" type="text/javascript"></script>
        <script type="text/javascript" charset="utf-8">
            $(function() {
            $("input.file_1").filestyle({
            image: "images/forms/choose-file.gif",
            imageheight: 21,
            imagewidth: 78,
            width: 310
            });
            });
        </script>

        <!-- Custom jquery scripts -->
        <script src="../skin/js/jquery/custom_jquery.js" type="text/javascript"></script>

        <!-- Tooltips -->
        <script src="../skin/js/jquery/jquery.tooltip.js" type="text/javascript"></script>
        <script src="../skin/js/jquery/jquery.dimensions.js" type="text/javascript"></script>
        <script type="text/javascript">
            $(function() {
            $('a.info-tooltip ').tooltip({
            track: true,
            delay: 0,
            fixPNG: true,
            showURL: false,
            showBody: " - ",
            top: -35,
            left: 5
            });
            });
        </script> 


        <!--  date picker script -->
        <link rel="stylesheet" href="../skin/css/datePicker.css" type="text/css" />
        <script src="../skin/js/jquery/date.js" type="text/javascript"></script>
        <script src="../skin/js/jquery/jquery.datePicker.js" type="text/javascript"></script>
        <script type="../skin/text/javascript" charset="utf-8">
            $(function()
            {

            // initialise the "Select date" link
            $('#dpBirth')
            .datePicker(
            // associate the link with a date picker
            {
            createButton: false,
            startDate: '01/01/2005',
            endDate: '31/12/2020'
            }
            ).bind(
            // when the link is clicked display the date picker
            'click',
            function()
            {
            updateSelects($(this).dpGetSelected()[0]);
            $(this).dpDisplay();
            return false;
            }
            ).bind(
            // when a date is selected update the SELECTs
            'dateSelected',
            function(e, selectedDate, $td, state)
            {
            updateSelects(selectedDate);
            }
            ).bind(
            'dpClosed',
            function(e, selected)
            {
            updateSelects(selected[0]);
            }
            );

            var updateSelects = function(selectedDate)
            {
            var selectedDate = new Date(selectedDate);
            $('#d option[value=' + selectedDate.getDate() + ']').attr('selected', 'selected');
            $('#m option[value=' + (selectedDate.getMonth() + 1) + ']').attr('selected', 'selected');
            $('#y option[value=' + (selectedDate.getFullYear()) + ']').attr('selected', 'selected');
            }
            // listen for when the selects are changed and update the picker
            $('#d, #m, #y')
            .bind(
            'change',
            function()
            {
            var d = new Date(
            $('#y').val(),
            $('#m').val() - 1,
            $('#d').val()
            );
            $('#date-pick').dpSetSelected(d.asString());
            }
            );

            // default the position of the selects to today
            var today = new Date();
            updateSelects(today.getTime());

            // and update the datePicker to reflect it...
            $('#d').trigger('change');
            });
        </script>

        <!-- MUST BE THE LAST SCRIPT IN <HEAD></HEAD></HEAD> png fix -->
        <script src="../skin/js/jquery/jquery.pngFix.pack.js" type="text/javascript"></script>
        <script type="text/javascript">
            $(document).ready(function() {
            $(document).pngFix( );
            });
        </script>
        <ui:insert name="head">

        </ui:insert>
    </h:head>
    <h:body>
        <!-- Start: page-top-outer -->
        <div id="page-top-outer">    

            <!-- Start: page-top -->
            <div id="page-top">

                <!-- start logo -->
                <div id="logo">
                    <a href=""><img src="../skin/images/shared/logo.png" width="156" height="40" alt="" /></a>
                </div>
                <!-- end logo -->

                <!--  start top-search -->
                <div id="top-search">
                    <table border="0" cellpadding="0" cellspacing="0">
                        <tr>
                            <td><input type="text" value="Search" onblur="if (this.value == '') {
                                        this.value = 'Search';
                                    }" onfocus="if (this.value == 'Search') {
                                        this.value = '';
                                    }" class="top-search-inp" /></td>
                            <td>
                                <!--<form>-->
                                <select  class="styledselect">
                                    <option value=""> All</option>
                                    <option value=""> Student</option>

                                    <option value="">Event</option>

                                </select> 
                                <!--</h:form>-->
                            </td>
                            <td>
                                <input type="image" src="../skin/images/shared/top_search_btn.gif"  />
                            </td>
                        </tr>
                    </table>
                </div>
                <!--  end top-search -->
                <div class="clear"></div>

            </div>
            <!-- End: page-top -->

        </div>
        <!-- End: page-top-outer -->

        <div class="clear">&nbsp;</div>

        <!--  start nav-outer-repeat................................................................................................. START -->
        <div class="nav-outer-repeat"> 
            <!--  start nav-outer -->
            <div class="nav-outer"> 

                <!-- start nav-right -->
                <div id="nav-right">

                    <div class="nav-divider">&nbsp;</div>
                    <div class="showhide-account"><img src="../skin/images/shared/nav/nav_myaccount.gif" width="93" height="14" alt="" /></div>
                    <div class="nav-divider">&nbsp;</div>
                    <a href="" id="logout"><img src="../skin/images/shared/nav/nav_logout.gif" width="64" height="14" alt="" /></a>
                    <div class="clear">&nbsp;</div>

                    <!--  start account-content -->	
                    <div class="account-content">
                        <div class="account-drop-inner">
                            <a href="" id="acc-settings">Settings</a>
                            <div class="clear">&nbsp;</div>
                            <div class="acc-line">&nbsp;</div>
                            <a href="" id="acc-details">Personal details </a>
                            <div class="clear">&nbsp;</div>
                            <div class="acc-line">&nbsp;</div>
                            <a href="" id="acc-project">Project details</a>
                            <div class="clear">&nbsp;</div>
                            <div class="acc-line">&nbsp;</div>
                            <a href="" id="acc-inbox">Inbox</a>
                            <div class="clear">&nbsp;</div>
                            <div class="acc-line">&nbsp;</div>
                            <a href="" id="acc-stats">Statistics</a> 
                        </div>
                    </div>
                    <!--  end account-content -->

                </div>
                <!-- end nav-right -->


                <!--  start nav -->
                <div class="nav">
                    <h:form>
                        <div class="table">

                            <ul class="select"><li><a href="#nogo"><b>Dashboard</b><!--[if IE 7]><!--></a><!--<![endif]-->
                                    <!--[if lte IE 6]><table><tr><td><![endif]-->
                                    <div class="select_sub">
                                        <ul class="sub">
                                            <li><a href="#nogo">Dashboard Details 1</a></li>
                                            <li><a href="#nogo">Dashboard Details 2</a></li>
                                            <li><a href="#nogo">Dashboard Details 3</a></li>
                                        </ul>
                                    </div>
                                    <!--[if lte IE 6]></td></tr></table></a><![endif]-->
                                </li>
                            </ul>

                            <div class="nav-divider">&nbsp;</div>

                            <ul class="current">
                                <li>
                                    <a href="#nogo"><b>Student</b><!--[if IE 7]><!--></a><!--<![endif]-->
                                    <!--[if lte IE 6]><table><tr><td><![endif]-->
                                    <div class="select_sub show">
                                        <ul class="sub">
                                            <!--                                            <li><a href="#nogo">View students</a></li>
                                                                                        <li><a href="#nogo">Add student</a></li>
                                                                                        <li><a href="#nogo">Delete products</a></li>-->
                                            <!--<li><h:commandLink value="View all" action="#{studentManager.list()}" /></li>-->
                                            <!--<li><h:commandLink value="Add" action="#{studentManager.create()}" /></li>-->
                                            <!--<li><h:commandLink value="Find" action="#{studentManager.find()}" /></li>-->
                                        </ul>
                                    </div>
                                    <!--[if lte IE 6]></td></tr></table></a><![endif]-->
                                </li>
                            </ul>

                            <div class="nav-divider">&nbsp;</div>

                            <ul class="select"><li><a href="#nogo"><b>Staff</b><!--[if IE 7]><!--></a><!--<![endif]-->
                                    <!--[if lte IE 6]><table><tr><td><![endif]-->

                                    <div class="select_sub">
                                        <!--<h:form id="staff">-->
                                        <ul class="sub">

                                            <li><h:commandLink action="#{staffManager.list()}" value="View all" /></li>
                                            <li><h:commandLink action="#{staffManager.create()}" value="Create" /></li>
                                        </ul>
                                        <!--</h:form>-->
                                    </div>

                                    <!--[if lte IE 6]></td></tr></table></a><![endif]-->
                                </li>
                            </ul>

                            <div class="nav-divider">&nbsp;</div>

                            <ul class="select"><li><a href="#nogo"><b>Clients</b><!--[if IE 7]><!--></a><!--<![endif]-->
                                    <!--[if lte IE 6]><table><tr><td><![endif]-->
                                    <div class="select_sub">
                                        <ul class="sub">
                                            <li><a href="#nogo">Clients Details 1</a></li>
                                            <li><a href="#nogo">Clients Details 2</a></li>
                                            <li><a href="#nogo">Clients Details 3</a></li>

                                        </ul>
                                    </div>
                                    <!--[if lte IE 6]></td></tr></table></a><![endif]-->
                                </li>
                            </ul>

                            <div class="nav-divider">&nbsp;</div>

                            <ul class="select"><li><a href="#nogo"><b>News</b><!--[if IE 7]><!--></a><!--<![endif]-->
                                    <!--[if lte IE 6]><table><tr><td><![endif]-->
                                    <div class="select_sub">
                                        <ul class="sub">
                                            <li><a href="#nogo">News details 1</a></li>
                                            <li><a href="#nogo">News details 2</a></li>
                                            <li><a href="#nogo">News details 3</a></li>
                                        </ul>
                                    </div>
                                    <!--[if lte IE 6]></td></tr></table></a><![endif]-->
                                </li>
                            </ul>

                            <div class="clear"></div>
                        </div>
                        <div class="clear"></div>
                    </h:form>
                </div>
                <!--  start nav -->

            </div>
            <div class="clear"></div>
            <!--  start nav-outer -->
        </div>
        <!--  start nav-outer-repeat................................................... END -->

        <div class="clear"></div>

        <!-- start content-outer ........................................................................................................................START -->
        <div id="content-outer">
            <!-- start content -->
            <div id="content">

                <!--  start page-heading -->
                <div id="page-heading">
                    <h1>
                        <ui:insert name="pageheader">
                            
                        </ui:insert>
                    </h1>
                </div>
                <!-- end page-heading -->

                <table border="0" width="100%" cellpadding="0" cellspacing="0" id="content-table">
                    <tr>
                        <th rowspan="3" class="sized"><img src="../skin/images/shared/side_shadowleft.jpg" width="20" height="300" alt="" /></th>
                        <th class="topleft"></th>
                        <td id="tbl-border-top">&nbsp;</td>
                        <th class="topright"></th>
                        <th rowspan="3" class="sized"><img src="../skin/images/shared/side_shadowright.jpg" width="20" height="300" alt="" /></th>
                    </tr>
                    <tr>
                        <td id="tbl-border-left"></td>
                        <td>
                            <!--  start content-table-inner ...................................................................... START -->
                            <div id="content-table-inner">

                                <!--  start table-content  -->
                                <div id="table-content">
                                    <ui:insert name="content">
                                    </ui:insert>


                                </div>
                                <!--  end table-content  -->

                                <div class="clear"></div>

                            </div>
                            <!--  end content-table-inner ............................................END  -->
                        </td>
                        <td id="tbl-border-right"></td>
                    </tr>
                    <tr>
                        <th class="sized bottomleft"></th>
                        <td id="tbl-border-bottom">&nbsp;</td>
                        <th class="sized bottomright"></th>
                    </tr>
                </table>
                <div class="clear">&nbsp;</div>

            </div>
            <!--  end content -->
            <div class="clear">&nbsp;</div>
        </div>
        <!--  end content-outer........................................................END -->

        <div class="clear">&nbsp;</div>

        <!-- start footer -->         
        <div id="footer">
            <!-- <div id="footer-pad">&nbsp;</div> -->
            <!--  start footer-left -->
            <div id="footer-left">
                Admin Skin &copy; Copyright Internet Dreams Ltd. <a href="">www.netdreams.co.uk</a>. All rights reserved.</div>
            <!--  end footer-left -->
            <div class="clear">&nbsp;</div>
        </div>
        <!-- end footer -->
    </h:body>
</html>

